<template>
    <BaseComposite :config="config" :refreshEditor="refreshEditor" @updateData="updateData">
        <el-link href="https://gitee.com/renlin901017/rl-plus-docs/blob/master/docs/BaseCascader.md" target="_blank" type="primary">更多用法请参考文档</el-link>
        <!-- template -->
        <div class="item template">
            <p class="label">~ 使用 ~</p>
            <el-tooltip
                class="box-item"
                effect="dark"
                content="点击可复制"
                placement="top-start"
            >
                <p @click="copyText(BaseHtml)">{{BaseHtml}}</p>
            </el-tooltip>
        </div>
        <!-- 基础用法 -->
        <BaseItem label="基础用法" :text="BaseScript">
            <BaseCascader :config="BaseConfig" v-model:value="config.value"></BaseCascader>
        </BaseItem>
        <!-- 支持多选 -->
        <BaseItem label="支持多选/禁用" :text="MultipleScript">
            <BaseCascader :config="MultipleConfig" v-model:value="MultipleConfig.value"></BaseCascader>
        </BaseItem>
        <!-- 其他用法 -->
        <BaseItem label="其他用法" :text="OtherScript">
            <BaseCascader :config="OtherConfig" v-model:value="OtherConfig.value"></BaseCascader>
        </BaseItem>
        <!-- 自定义设置 -->
        <div class="item">
            <el-tooltip
                class="box-item"
                effect="dark"
                content="点击可复制"
                placement="top-start"
            >
                <p class="custom" @click="copyText(JsonToString(config))">自定义设置</p>     
            </el-tooltip>
            <BaseCascader :key="config" :config="config" v-model:value="config.value"></BaseCascader>
        </div>
        <template #props>
            <BaseForm :config="formConfig" :key="formConfig" ref="myForm">                
                <div class="btns">                    
                    <el-button type="primary" @click="useConfig" :auto-insert-space="true">应用</el-button>
                    <el-button @click="reset" :auto-insert-space="true">重置</el-button>
                </div>
            </BaseForm>         
        </template>
    </BaseComposite>
</template>
<script lang="ts" setup>
import { ref, isRef, reactive,nextTick } from 'vue';
import BaseComposite from '@/components/BaseComposite';
import BaseItem from '@/components/BaseItem';
import { ElButton,ElTooltip,ElLink } from "element-plus";
import dictJson from '@/assets/json';
import { BaseCascader, BaseCascaderType, BaseForm,BaseFormType, BaseFormItemEleType, GroupComsType, InputValue } from 'rl-plus';
import { deepClone, JsonToString } from 'rl-utils';
import { copyText } from '../../utils/index';
const BaseHtml = `<BaseCascader :config="config" v-model:value="config.value" />`
// 基础用法
const BaseScript = `
import { ref} from 'vue';
import { BaseCascader, BaseCascaderType} from 'rl-plus';
const config = ref<BaseCascaderType>({
    value: "",
    data: [{
        label: "一年级",
        value: "1",
        children: [
            {
                label: "1班",
                value: "1-1",
                children: [
                    {
                        label: "张三",
                        value: "1101",
                    }
                ]
            },
            {
                label: "2班",
                value: "1-2",
                children: [
                    {
                        label: "李四",
                        value: "1201",
                    }
                ]
            },
            {
                label: "3班",
                value: "1-3",
                children: [
                    {
                        label: "王二麻子",
                        value: "1301",
                    }
                ]
            } 
        ]
    }]
})
`
const BaseConfig=ref<BaseCascaderType>({
    value: "",
    data: [{
        label: "一年级",
        value: "1",
        children: [
            {
                label: "1班",
                value: "1-1",
                children: [
                    {
                        label: "张三",
                        value: "1101",
                    }
                ]
            },
            {
                label: "2班",
                value: "1-2",
                children: [
                    {
                        label: "李四",
                        value: "1201",
                    }
                ]
            },
            {
                label: "3班",
                value: "1-3",
                children: [
                    {
                        label: "王二麻子",
                        value: "1301",
                    }
                ]
            } 
        ]
    }]
})
// 支持多选
const MultipleScript = `
import { ref} from 'vue';
import { BaseCascader, BaseCascaderType} from 'rl-plus';
const config = ref<BaseCascaderType>({
    value: "",
    props: {
        multiple: true,
    },
    data: [{
        label: "一年级",
        value: "1",
        children: [
            {
                label: "1班",
                value: "1-1",
                children: [
                    {
                        label: "张三",
                        value: "1101",
                    }
                ]
            },
            {
                label: "2班",
                value: "1-2",
                children: [
                    {
                        label: "李四",
                        value: "1201",
                    }
                ]
            },
            {
                label: "3班",
                value: "1-3",
                disabled:true,
                children: [
                    {
                        label: "王二麻子",
                        value: "1301",
                    }
                ]
            } 
        ]
    }]
})
`
const MultipleConfig=ref<BaseCascaderType>({
    value: "",
    props: {
        multiple: true,
    },
    data: [{
        label: "一年级",
        value: "1",
        children: [
            {
                label: "1班",
                value: "1-1",
                children: [
                    {
                        label: "张三",
                        value: "1101",
                    }
                ]
            },
            {
                label: "2班",
                value: "1-2",
                children: [
                    {
                        label: "李四",
                        value: "1201",
                    }
                ]
            },
            {
                label: "3班",
                value: "1-3",
                disabled:true,
                children: [
                    {
                        label: "王二麻子",
                        value: "1301",
                    }
                ]
            } 
        ]
    }]
})
// 其他用法
const OtherScript = `
import { ref} from 'vue';
import { BaseCascader, BaseCascaderType} from 'rl-plus';
const config = ref<BaseCascaderType>({
    value: "",
    class:"item-custom",
    style:"padding:10px;background:#f5f5f5",
    props: {
        multiple: true,
    },
    data: [{
        label: "一年级",
        value: "1",
        children: [
            {
                label: "1班",
                value: "1-1",
                children: [
                    {
                        label: "张三",
                        value: "1101",
                    }
                ]
            },
            {
                label: "2班",
                value: "1-2",
                children: [
                    {
                        label: "李四",
                        value: "1201",
                    }
                ]
            },
            {
                label: "3班",
                value: "1-3",
                disabled:true,
                children: [
                    {
                        label: "王二麻子",
                        value: "1301",
                    }
                ]
            } 
        ]
    }]
})
`
const OtherConfig=ref<BaseCascaderType>({
    value: "",
    class: "item-custom",
    style:"padding:10px;background:#f5f5f5",
    props: {
        multiple: true,
    },
    data: [{
        label: "一年级",
        value: "1",
        children: [
            {
                label: "1班",
                value: "1-1",
                children: [
                    {
                        label: "张三",
                        value: "1101",
                    }
                ]
            },
            {
                label: "2班",
                value: "1-2",
                children: [
                    {
                        label: "李四",
                        value: "1201",
                    }
                ]
            },
            {
                label: "3班",
                value: "1-3",
                disabled:true,
                children: [
                    {
                        label: "王二麻子",
                        value: "1301",
                    }
                ]
            } 
        ]
    }]
})
// 初始化
const config = ref<BaseCascaderType>({
    value: "",
    data: [{
        label: "一年级",
        value: "1",
        children: [
            {
                label: "1班",
                value: "1-1",
                children: [
                    {
                        label: "张三",
                        value: "1101",
                    }
                ]
            },
            {
                label: "2班",
                value: "1-2",
                children: [
                    {
                        label: "李四",
                        value: "1201",
                    }
                ]
            },
            {
                label: "3班",
                value: "1-3",
                children: [
                    {
                        label: "王二麻子",
                        value: "1301",
                    }
                ]
            } 
        ]
    }]
})
// 备份数据
const initData = deepClone(config.value)
// 刷新JsonEditor
const refreshEditor = ref(true)
// form表单
const formConfig = reactive<BaseFormType>({
    eleType: GroupComsType.BASEFORM,
    labelWidth:200,
    config: [
        {
            eleType: BaseFormItemEleType.BASEINPUT,
            prop: 'placeholder',
            value:'',
            label: '输入框占位文本',
        },
        // {
        //     eleType: BaseFormItemEleType.BASESWITCH,
        //     prop: 'multiple',
        //     value:false,
        //     label: '是否多选',
        // },
        {
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'showAllLevels',
            value:false,
            label: '是否显示选中值的完整路径',
        },{
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'collapseTags',
            value:false,
            label: '多选模式下是否折叠',
        },{
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'collapseTagsTooltip',
            value:false,
            label: '是否显示所有选中的标签',
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            prop: 'separator',
            value:'',
            label: '分隔选项的字符',
        },{
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'filterable',
            value:false,
            label: '该选项是否可以被搜索',
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            type:InputValue.INT,
            prop: 'debounce',
            value:0,
            label: '抖延迟',
        },
        // {
        //     eleType: BaseFormItemEleType.BASEINPUT,
        //     prop: 'popperClass',
        //     value:'',
        //     label: '自定义类名',
        // },
        {
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'teleported',
            value:false,
            label: '弹层是否使用 teleport',
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            prop: 'tagType',
            value:'',
            label: '标签类型',
        },
        {
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'clearable',
            value:false,
            label: '清空'
        },{
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'disabled',
            value:false,
            label: '禁用'
        },{
            eleType: BaseFormItemEleType.BASESELECT,
            prop: 'size',
            value:'',
            label: '尺寸',
            data: dictJson.sizes
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            prop: 'class',
            value:'',
            label: '类'
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            prop: 'style',
            value:'',
            label: '样式'
        },{
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'validateEvent',
            value:true,
            label: '输入时是否触发表单的校验',
        }
    ]
})
const myForm=ref(null)

// 白名单（该属性默认为true）
const propsConfig=['showAllLevels','teleported','validateEvent']
const useConfig = () => {
    if (myForm.value) {
        let newData = deepClone(myForm.value.newData)
        const dataKeys = Object.keys(newData)
        dataKeys.map(item => {
            if (!newData[item]&&!propsConfig.includes(item)) { 
                delete newData[item]
            }
        })
        if (Object.keys(newData).length > 0) {
            config.value = {...config.value,...newData}
            refreshEditor.value = false
            nextTick(() => {
                refreshEditor.value = true
            })
        } else { 
            reset()
        }
    }
}
const reset = () => { 
    config.value = initData
    refreshEditor.value = false
    nextTick(() => {
        myForm.value.resetForm()
        refreshEditor.value = true
    })
}
// JsonEditor数据同步
const updateData = (e) => { 
    config.value=isRef(e)&&e.value||e
}
</script>
<style lang="scss" scoped>
    @import "../../assets/css/index.scss";
    .tip{
        color: #999;
        text-align: center;
        padding: 10px;
    }
    .btns{
        display: flex;
        justify-content: center;
    }
</style>